-
Notifications
You must be signed in to change notification settings - Fork 455
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #5 from DivanteLtd/master
Pull
- Loading branch information
Showing
59 changed files
with
1,448 additions
and
237 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <div class="sf-arrow"> | ||
| <button v-on="$listeners" class="sf-arrow__button" type="button"> | ||
| <slot> | ||
| <svg class="sf-arrow__icon"viewBox="0 0 24 12" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
| <path d="M24 7L2 7L2 5L24 5L24 7Z"/> | ||
| <path d="M6.61667 1.20934e-07L8 1.25423L2.76478 6L8 10.7458L6.61667 12L-5.24538e-07 5.99998L6.61667 1.20934e-07Z"/> | ||
| </svg> | ||
| </slot> | ||
| </button> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export default { | ||
| name: "SfArrow" | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| @import '../../../css/variables'; | ||
|
|
||
| $arrow__button-color: $c-light-primary; | ||
| $arrow__button-color--hover: $c-dark-primary; | ||
|
|
||
| $arrow__button-shadow: 0 5px 12px -6px rgba($c-dark-primary, 0); | ||
| $arrow__button-shadow--right: 0 -5px 12px -5px rgba($c-dark-primary, 0.6); | ||
|
|
||
| $arrow__icon-color: $c-white; | ||
| $arrow__icon-color--hover: $c-dark-primary; | ||
|
|
||
| .sf-arrow { | ||
|
|
||
| &__button{ | ||
| position: relative; | ||
| display: flex; | ||
| border: 0; | ||
| padding: 14px 10px 14px; | ||
| background-color: $arrow__button-color; | ||
| cursor: pointer; | ||
| outline: 0; | ||
| transition: padding 150ms linear, | ||
| background-color 150ms linear, | ||
| box-shadow 150ms linear; | ||
| box-shadow: 0 5px 12px -6px rgba(29, 31, 34, 0); | ||
|
|
||
| &:hover{ | ||
| background-color: $arrow__button-color--hover; | ||
| box-shadow: 0 5px 12px -5px rgba(29, 31, 34, 0.6); | ||
|
|
||
| .sf-arrow__icon{ | ||
| fill: $arrow__icon-color; | ||
| } | ||
| } | ||
| } | ||
| &__icon { | ||
| position: relative; | ||
| z-index: 1; | ||
| flex: 0 0 24px; | ||
| height: 12px; | ||
| fill: $arrow__icon-color--hover; | ||
| transition: fill 150ms linear; | ||
| } | ||
|
|
||
| &--long{ | ||
| width: 70px; | ||
| height: 40px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
|
|
||
| .sf-arrow{ | ||
| &__button{ | ||
| padding: 9px 26px 9px 10px; | ||
| background-color: $arrow__icon-color; | ||
|
|
||
| &:hover{ | ||
| padding: 14px 36px 14px 10px; | ||
| background-color: $arrow__icon-color--hover; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| &--right{ | ||
| justify-content: flex-end; | ||
|
|
||
| .sf-arrow{ | ||
| &__button{ | ||
| transform: rotate(180deg); | ||
|
|
||
| &:hover{ | ||
| box-shadow: $arrow__button-shadow--right; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { shallowMount } from "@vue/test-utils"; | ||
| import SfArrow from "./SfArrow.vue"; | ||
|
|
||
| describe("SfArrow.vue", () => { | ||
| it("renders a component", () => { | ||
| const component = shallowMount(SfArrow); | ||
| expect(component.contains(".sf-arrow")).toBe(true); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies */ | ||
| import { storiesOf } from "@storybook/vue"; | ||
| import { withKnobs, optionsKnob as options } from "@storybook/addon-knobs"; | ||
| import { generateStorybookTable } from "@/helpers"; | ||
| import SfArrow from "./SfArrow.vue"; | ||
|
|
||
| const scssTableConfig = { | ||
| tableHeadConfig: ["NAME", "DEFAULT", "DESCRIPTION"], | ||
| tableBodyConfig: [ | ||
| ["$arrow__button-color", "$c-light-primary", "color for button"], | ||
| [ | ||
| "$arrow__button-color--hover", | ||
| "$c-dark-primary", | ||
| "color for hovered button" | ||
| ], | ||
| [ | ||
| "$arrow__button-shadow", | ||
| "0 5px 12px -6px rgba($c-dark-primary, 0)", | ||
| "shadow for hovered button" | ||
| ], | ||
| [ | ||
| "$arrow__button-shadow--right", | ||
| "0 -5px 12px -5px rgba($c-dark-primary, 0.6)", | ||
| "shadow for hovered right arrow" | ||
| ], | ||
| ["$arrow__icon-color", "$c-white", "color for icon"], | ||
| ["$arrow__icon-color--hover", "$c-dark-primary", "color for hovered icon"] | ||
| ] | ||
| }; | ||
|
|
||
| const cssTableConfig = { | ||
| tableHeadConfig: ["NAME", "DESCRIPTION"], | ||
| tableBodyConfig: [ | ||
| [".sf-arrow--long", "change short to long arrow"], | ||
| [".sf-arrow--right", "transform left to right arrow"] | ||
| ] | ||
| }; | ||
|
|
||
| storiesOf("Atoms|Arrow", module) | ||
| .addDecorator(withKnobs) | ||
| .add( | ||
| "Basic", | ||
| () => ({ | ||
| components: { SfArrow }, | ||
| props: { | ||
| customClass: { | ||
| default: options( | ||
| "CSS Modifiers", | ||
| { | ||
| null: "null", | ||
| "sf-arrow--right": "sf-arrow--right", | ||
| "sf-arrow--long": "sf-arrow--long" | ||
| }, | ||
| "null", | ||
| { display: "multi-select" } | ||
| ) | ||
| } | ||
| }, | ||
| template: ` | ||
| <div :style="{padding: '1rem', 'background-color': customClass.indexOf('sf-arrow--long') ? '' : '#F1F2F3'}"> | ||
| <SfArrow :class="customClass"> | ||
| </div> | ||
| ` | ||
| }), | ||
| { | ||
| info: { | ||
| summary: `<h2> Usage </h2> | ||
| <pre><code>import SfArrow from "@storefrontui/vue/dist/SfArrow.vue"</code></pre> | ||
| ${generateStorybookTable(scssTableConfig, "SCSS variables")} | ||
| ${generateStorybookTable(cssTableConfig, "CSS modifiers")} | ||
| ` | ||
| } | ||
| } | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <script src="./SfArrow.js"></script> | ||
| <template lang="html" src="./SfArrow.html"></template> | ||
| <style lang="scss" src="./SfArrow.scss"></style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
| export default { | ||
| name: "SfBadge", | ||
| name: "SfBadge" | ||
| }; | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.