Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added Vds prefix to Vue Components to avoid conflict with standard HTML elements #178

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

added Vds prefix to Vue Components to avoid conflict with standard HTML elements #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b433be9
added Vds prefix to Vue Components to avoid conflict with standard HT…
Apr 11, 2019
edfab27
fixed invalid Icon reference to VdsIcon for Docs
Apr 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions docs/components/status/Components.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
<div class="component-status">
<ul class="status-list">
<li>
<Icon name="ready" fill="#7cb518" size="small"/>
<VdsIcon name="ready" fill="#7cb518" size="small" />
<p>Ready</p>
</li>
<li>
<Icon name="review" :fill="tokens.color_ucla_gold.value" size="small"/>
<VdsIcon name="review" :fill="tokens.color_ucla_gold.value" size="small" />
<p>Under review</p>
</li>
<li>
<Icon name="deprecated" :fill="tokens.color_vermilion.value" size="small"/>
<VdsIcon name="deprecated" :fill="tokens.color_vermilion.value" size="small" />
<p>Deprecated</p>
</li>
<li>
<Icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small"/>
<VdsIcon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small" />
<p>Prototype</p>
</li>
<li>
Expand All @@ -36,26 +36,26 @@
<tbody>
<tr v-for="(component, index) in components" :key="index" class="component">
<td v-if="component.name">
<code class="name">{{component.name}}</code>
<code class="name">{{ component.name }}</code>
</td>
<td v-else>N/A</td>
<td v-if="component.release">{{component.release}}</td>
<td v-if="component.release">{{ component.release }}</td>
<td v-else>N/A</td>
<td v-if="component.status">
<Icon v-if="component.status === 'ready'" name="ready" fill="#7cb518" size="small"/>
<Icon
<VdsIcon v-if="component.status === 'ready'" name="ready" fill="#7cb518" size="small" />
<VdsIcon
v-if="component.status === 'under-review' || component.status === 'review'"
name="review"
:fill="tokens.color_ucla_gold.value"
size="small"
/>
<Icon
<VdsIcon
v-if="component.status === 'prototype'"
name="prototype"
:fill="tokens.color_bleu_de_france.value"
size="small"
/>
<Icon
<VdsIcon
v-if="component.status === 'deprecated'"
name="deprecated"
:fill="tokens.color_vermilion.value"
Expand Down
45 changes: 33 additions & 12 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 12 additions & 12 deletions src/elements/Button.vue → src/elements/VdsButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<component :is="type" :href="href" :type="submit" :class="['button', size, state, variation]">
<slot/>
<component :is="type" :href="href" :type="submit" :class="['vds-button', size, state, variation]">
<slot />
</component>
</template>

Expand All @@ -11,7 +11,7 @@
* Primary style should be used only once per view for main call-to-action.
*/
export default {
name: "Button",
name: "VdsButton",
status: "prototype",
release: "3.5.0",
props: {
Expand Down Expand Up @@ -81,7 +81,7 @@ export default {
</script>

<style lang="scss" scoped>
.button {
.vds-button {
@include reset;
@include stack-space($space-m);
@include inline-space($space-xs);
Expand Down Expand Up @@ -128,7 +128,7 @@ export default {
}

// For icons inside buttons
.icon {
.vds-icon {
float: right;
margin: -#{$space-xs} -#{$space-xs} -#{$space-s} $space-xs/2;
color: $color-bleu-de-france;
Expand Down Expand Up @@ -175,14 +175,14 @@ export default {
<docs>
```jsx
<div>
<Button variation="primary" size="large">Primary Button</Button>
<Button variation="primary" size="medium">Medium</Button>
<Button variation="primary" size="small">Small</Button>
<VdsButton variation="primary" size="large">Primary Button</VdsButton>
<VdsButton variation="primary" size="medium">Medium</VdsButton>
<VdsButton variation="primary" size="small">Small</VdsButton>
<br />
<Button>Default Button</Button>
<Button state="hover">:hover</Button>
<Button state="active">:active</Button>
<Button state="focus">:focus</Button>
<VdsButton>Default Button</VdsButton>
<VdsButton state="hover">:hover</VdsButton>
<VdsButton state="active">:active</VdsButton>
<VdsButton state="focus">:focus</VdsButton>
</div>
```
</docs>
16 changes: 7 additions & 9 deletions src/elements/Heading.vue → src/elements/VdsHeading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
<template>
<component :is="level" class="heading">
<slot/>
</component>
<component :is="level" class="vds-heading"> <slot /> </component>
</template>

<script>
Expand All @@ -11,7 +9,7 @@
* Heading element provides an option to change the level of the heading.
*/
export default {
name: "Heading",
name: "VdsHeading",
status: "prototype",
release: "1.0.0",
props: {
Expand All @@ -31,7 +29,7 @@ export default {
</script>

<style lang="scss" scoped>
.heading {
.vds-heading {
@include reset;
@include stack-space($space-m);
font-family: $font-heading;
Expand Down Expand Up @@ -75,10 +73,10 @@ h6 {
<docs>
```jsx
<div>
<Heading>The quick brown fox</Heading>
<Heading level="h2">The quick brown fox</Heading>
<Heading level="h3">The quick brown fox</Heading>
<Heading level="h4">The quick brown fox</Heading>
<VdsHeading>The quick brown fox</VdsHeading>
<VdsHeading level="h2">The quick brown fox</VdsHeading>
<VdsHeading level="h3">The quick brown fox</VdsHeading>
<VdsHeading level="h4">The quick brown fox</VdsHeading>
</div>
```
</docs>
14 changes: 7 additions & 7 deletions src/elements/Icon.vue → src/elements/VdsIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<component :is="type" :aria-label="ariaLabel" :class="['icon', size]" v-html="svg"/>
<component :is="type" :aria-label="ariaLabel" :class="['vds-icon', size]" v-html="svg" />
</template>

<script>
Expand All @@ -11,7 +11,7 @@ const req = require.context("@/assets/icons/", true, /^\.\/.*\.svg$/)
* easily understand where they are in the product.
*/
export default {
name: "Icon",
name: "VdsIcon",
status: "review",
release: "1.0.0",
props: {
Expand Down Expand Up @@ -70,7 +70,7 @@ export default {

// We don’t want to use scoped since these styles need to cascade down to SVGs.
// We also want to be able to style .icon inside buttons etc.
.icon {
.vds-icon {
@include reset;
&.large svg {
width: $space-l;
Expand All @@ -90,10 +90,10 @@ export default {
<docs>
```jsx
<div>
<Icon name="ready" aria-label="Component is ready" fill="#7cb518" />
<Icon name="review" fill="rgb(255,186,10)" />
<Icon name="deprecated" fill="rgb(235,59,36)" />
<Icon name="prototype" fill="rgb(37,138,239)" />
<VdsIcon name="ready" aria-label="Component is ready" fill="#7cb518" />
<VdsIcon name="review" fill="rgb(255,186,10)" />
<VdsIcon name="deprecated" fill="rgb(235,59,36)" />
<VdsIcon name="prototype" fill="rgb(37,138,239)" />
</div>
```
</docs>
Loading