Subida del módulo y tema de PrestaShop

themes/hummingbird/stories/ui/buttons/anchor.html

@@ -0,0 +1,51 @@
+<a href="#" class="btn btn-primary">This is a link</a>
+<a href="#" class="btn btn-primary"
+  ><i class="material-icons">ac_unit</i> This is a link</a
+>
+
+<br /><br />
+
+<div class="row">
+  <div class="col col-sm-4">
+    <button type="button" class="btn btn-primary btn-block btn-sm">
+      Small block level button
+    </button>
+    <button type="button" class="btn btn-outline-primary btn-block btn-sm">
+      Small block level button
+    </button>
+    <button type="button" class="btn btn-secondary btn-block btn-sm">
+      Small block level button
+    </button>
+    <button type="button" class="btn btn-outline-secondary btn-block btn-sm">
+      Small block level button
+    </button>
+  </div>
+  <div class="col col-sm-4">
+    <button type="button" class="btn btn-primary btn-block">
+      Normal block level button
+    </button>
+    <button type="button" class="btn btn-outline-primary btn-block">
+      Normal block level button
+    </button>
+    <button type="button" class="btn btn-secondary btn-block">
+      Normal block level button
+    </button>
+    <button type="button" class="btn btn-outline-secondary btn-block">
+      Normal block level button
+    </button>
+  </div>
+  <div class="col col-sm-4">
+    <button type="button" class="btn btn-primary btn-block btn-lg">
+      Large block level button
+    </button>
+    <button type="button" class="btn btn-outline-primary btn-block btn-lg">
+      Large block level button
+    </button>
+    <button type="button" class="btn btn-secondary btn-block btn-lg">
+      Large block level button
+    </button>
+    <button type="button" class="btn btn-outline-secondary btn-block btn-lg">
+      Large block level button
+    </button>
+  </div>
+</div>

themes/hummingbird/stories/ui/buttons/basics.html

@@ -0,0 +1,9 @@
+<button type="button" class="btn btn-primary">Primary</button>
+<button type="button" class="btn btn-secondary">Secondary</button>
+<button type="button" class="btn btn-success">Success</button>
+<button type="button" class="btn btn-danger">Danger</button>
+<button type="button" class="btn btn-warning">Warning</button>
+<button type="button" class="btn btn-info">Info</button>
+<button type="button" class="btn btn-light">Light</button>
+<button type="button" class="btn btn-dark">Dark</button>
+<button type="button" class="btn btn-link">Link</button>

themes/hummingbird/stories/ui/buttons/disabled.html

@@ -0,0 +1,4 @@
+<button type="button" class="btn btn-primary" disabled>Disabled</button>
+<button type="button" class="btn btn-outline-primary" disabled>
+  Disabled
+</button>

themes/hummingbird/stories/ui/buttons/group-radio.html

@@ -0,0 +1,10 @@
+<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
+  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
+  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
+
+  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
+  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
+
+  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
+  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
+</div>

themes/hummingbird/stories/ui/buttons/group.html

@@ -0,0 +1,11 @@
+<div class="btn-group" role="group" aria-label="Basic example">
+  <button type="button" class="btn btn-primary">Left</button>
+  <button type="button" class="btn btn-primary">Middle</button>
+  <button type="button" class="btn btn-primary">Right</button>
+</div>
+
+<div class="btn-group" role="group" aria-label="Basic outlined example">
+  <button type="button" class="btn btn-outline-primary">Left</button>
+  <button type="button" class="btn btn-outline-primary">Middle</button>
+  <button type="button" class="btn btn-outline-primary">Right</button>
+</div>

themes/hummingbird/stories/ui/buttons/index.stories.js

@@ -0,0 +1,113 @@
+import basicsContent from './basics.html'
+import outlineContent from './outline.html'
+import disabledContent from './disabled.html'
+import sizesContent from './sizes.html'
+import transparentContent from './transparent.html'
+import anchorContent from './anchor.html'
+import withIconsContent from './with-icons.html'
+import groupContent from './group.html'
+import groupRadioContent from './group-radio.html'
+
+export default {
+  title: 'UI/Buttons',
+  parameters: {
+    docs: {
+      description: {
+        component: 'Buttons are used to trigger actions in forms, dialogs, and more.'
+      }
+    }
+  }
+};
+
+export const Basics = () => basicsContent;
+Basics.parameters = {
+  docs: {
+    source: {
+      code: basicsContent
+    },
+    description: {
+      story: 'Some basic buttons'
+    }
+  }
+};
+
+export const Outline = () => outlineContent;
+Outline.parameters = {
+  docs: {
+    source: {
+      code: outlineContent
+    }
+  }
+};
+
+export const Disabled = () => disabledContent;
+Disabled.parameters = {
+  docs: {
+    source: {
+      code: disabledContent
+    },
+    description: {
+      story: 'Every buttons have this style when they\'re disabled.'
+    }
+  }
+};
+
+export const Sizes = () => sizesContent;
+Sizes.parameters = {
+  docs: {
+    source: {
+      code: sizesContent
+    },
+    description: {
+      story: 'You are able to use different sizes of buttons'
+    }
+  }
+};
+
+export const Transparent = () => transparentContent;
+Transparent.parameters = {
+  docs: {
+    source: {
+      code: transparentContent
+    }
+  }
+};
+
+export const Anchor = () => anchorContent;
+Anchor.parameters = {
+  docs: {
+    source: {
+      code: anchorContent
+    }
+  }
+};
+
+export const WithIcons = () => withIconsContent;
+WithIcons.parameters = {
+  docs: {
+    source: {
+      code: withIconsContent
+    }
+  }
+};
+WithIcons.storyName = 'Buttons with icons';
+
+export const Group = () => groupContent;
+Group.parameters = {
+  docs: {
+    source: {
+      code: groupContent
+    }
+  }
+};
+Group.storyName = 'Button group';
+
+export const GroupRadio = () => groupRadioContent;
+GroupRadio.parameters = {
+  docs: {
+    source: {
+      code: groupRadioContent
+    }
+  }
+};
+GroupRadio.storyName = 'Button group with radio buttons';

themes/hummingbird/stories/ui/buttons/outline.html

@@ -0,0 +1,5 @@
+<button type="button" class="btn btn-outline-primary">Primary</button>
+<button type="button" class="btn btn-outline-secondary">Secondary</button>
+<button type="button" class="btn btn-outline-success">Success</button>
+<button type="button" class="btn btn-outline-danger">Danger</button>
+<button type="button" class="btn btn-outline-warning">Warning</button>

themes/hummingbird/stories/ui/buttons/sizes.html

@@ -0,0 +1,24 @@
+<button type="button" class="btn btn-primary btn-sm">Small button</button>
+<button type="button" class="btn btn-primary">Normal button</button>
+<button type="button" class="btn btn-primary btn-lg">Large button</button>
+
+<button type="button" class="btn btn-secondary btn-lg">Large button</button>
+<button type="button" class="btn btn-secondary">Normal button</button>
+<button type="button" class="btn btn-secondary btn-sm">Small button</button>
+
+<br /><br />
+
+<button type="button" class="btn btn-outline-primary btn-sm">
+  Small button
+</button>
+<button type="button" class="btn btn-outline-primary">Normal button</button>
+<button type="button" class="btn btn-outline-primary btn-lg">
+  Large button
+</button>
+<button type="button" class="btn btn-outline-secondary btn-lg">
+  Large button
+</button>
+<button type="button" class="btn btn-outline-secondary">Normal button</button>
+<button type="button" class="btn btn-outline-secondary btn-sm">
+  Small button
+</button>

themes/hummingbird/stories/ui/buttons/transparent.html

@@ -0,0 +1,4 @@
+<button type="button" class="btn btn-text">This is a button</button>
+<button type="button" class="btn btn-text">
+  <i class="material-icons">ac_unit</i> Button with icon
+</button>

themes/hummingbird/stories/ui/buttons/with-icons.html

@@ -0,0 +1,70 @@
+<button type="button" class="btn btn-primary" aria-label="Iceberg">
+  <i class="material-icons">vertical_align_bottom</i> Iceberg
+</button>
+<button type="button" class="btn btn-outline-primary" aria-label="Iceberg">
+  <i class="material-icons">vertical_align_bottom</i> Iceberg
+</button>
+<button type="button" class="btn btn-secondary" aria-label="Iceberg">
+  <i class="material-icons">vertical_align_bottom</i> Iceberg
+</button>
+<button type="button" class="btn btn-outline-secondary" aria-label="Iceberg">
+  <i class="material-icons">vertical_align_bottom</i> Iceberg
+</button>
+<button type="button" class="btn btn-primary" aria-label="Iceberg" disabled>
+  Iceberg <i class="material-icons">vertical_align_bottom</i>
+</button>
+<button
+  type="button"
+  class="btn btn-outline-primary"
+  aria-label="Iceberg"
+  disabled
+>
+  Iceberg <i class="material-icons">vertical_align_bottom</i>
+</button>
+<br /><br />
+
+<button type="button" class="btn btn-primary btn-lg">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+<button type="button" class="btn btn-primary">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+<button type="button" class="btn btn-primary btn-sm">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+
+<br /><br />
+
+<button type="button" class="btn btn-outline-primary btn-sm">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+<button type="button" class="btn btn-outline-primary">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+<button type="button" class="btn btn-outline-primary btn-lg">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+
+<br /><br />
+
+<button type="button" class="btn btn-secondary btn-lg">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+<button type="button" class="btn btn-secondary">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+<button type="button" class="btn btn-secondary btn-sm">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+
+<br /><br />
+
+<button type="button" class="btn btn-outline-secondary btn-sm">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+<button type="button" class="btn btn-outline-secondary">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>
+<button type="button" class="btn btn-outline-secondary btn-lg">
+  <i class="material-icons">vertical_align_bottom</i> Very very long Iceberg
+</button>