Skip to content

Commit 3105a4c

Browse files
didoodidoo
authored
Merge pull request #1640 from hashicorp/add-vault-secrets-to-icon-tile
`IconTile` - Add "Vault Secrets" product
2 parents f488291 + b161f22 commit 3105a4c

File tree

17 files changed

+600
-10
lines changed

17 files changed

+600
-10
lines changed

‎.changeset/nervous-lizards-wave.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
"@hashicorp/design-system-components": minor
3+
"@hashicorp/design-system-tokens": minor
4+
---
5+
6+
`Design tokens` - Added color tokens for “Vault Secrets” product
7+
8+
`IconTile` - updated component to include `vault-secrets` product option

‎packages/components/addon/components/hds/icon-tile/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const PRODUCTS = [
1818
'terraform',
1919
'vagrant',
2020
'vault',
21+
'vault-secrets',
2122
'waypoint',
2223
];
2324
export const COLORS = ['neutral', ...PRODUCTS];

‎packages/components/app/styles/components/icon-tile.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
$hds-icon-tile-sizes: ( "small", "medium", "large" );
1111
$hds-icon-tile-types: ( "object","resource","logo" );
12-
$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "waypoint" );
12+
$hds-icon-tile-colors-products: ( "boundary", "consul", "hcp", "nomad", "packer", "terraform", "vagrant", "vault", "vault-secrets", "waypoint" );
1313
$hds-icon-tile-border-width: 1px;
1414
$hds-icon-tile-box-shadow: 0 1px 1px rgba(#656a76, 0.05);
1515

‎packages/components/tests/dummy/app/templates/components/icon-tile.hbs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454

5555
<Shw::Grid @columns={{5}} as |SG|>
5656
{{#each @model.PRODUCTS as |product|}}
57-
<SG.Item @label={{capitalize product}}>
57+
<SG.Item @label={{product}}>
5858
<Shw::Flex as |SF2|>
5959
{{#each @model.SIZES as |size|}}
6060
<SF2.Item>
@@ -72,7 +72,7 @@
7272
{{#each @model.COLORS as |color|}}
7373
{{! As agreed with designers, we prefer to hide the option of icon with "hcp" color }}
7474
{{#if (not-eq color "hcp")}}
75-
<SG.Item @label={{capitalize color}}>
75+
<SG.Item @label={{color}}>
7676
<Shw::Flex as |SF|>
7777
{{#each @model.SIZES as |size|}}
7878
<SF.Item>

‎packages/components/tests/integration/components/hds/icon-tile/index-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ module('Integration | Component | hds/icon-tile/index', function (hooks) {
122122
});
123123
test('it should throw an assertion if a wrong @logo value is passed', async function (assert) {
124124
const errorMessage =
125-
'@logo for "Hds::IconTile" must be one of the following: boundary, consul, hcp, nomad, packer, terraform, vagrant, vault, waypoint; received: test';
125+
'@logo for "Hds::IconTile" must be one of the following: boundary, consul, hcp, nomad, packer, terraform, vagrant, vault, vault-secrets, waypoint; received: test';
126126
assert.expect(2);
127127
setupOnerror(function (error) {
128128
assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`);

‎packages/tokens/dist/devdot/css/tokens.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Wed, 28 Jun 2023 07:32:09 GMT
3+
* Generated on Fri, 15 Sep 2023 06:10:51 GMT
44
*/
55

66
:root {
@@ -144,6 +144,15 @@
144144
--token-color-vagrant-gradient-primary-stop: #7dadff;
145145
--token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */
146146
--token-color-vagrant-gradient-faint-stop: #d6ebff;
147+
--token-color-vault-secrets-brand: #ffd814;
148+
--token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */
149+
--token-color-vault-secrets-foreground: #9a6f00;
150+
--token-color-vault-secrets-surface: #fff9cf;
151+
--token-color-vault-secrets-border: #feec7b;
152+
--token-color-vault-secrets-gradient-primary-start: #feec7b;
153+
--token-color-vault-secrets-gradient-primary-stop: #ffe543;
154+
--token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */
155+
--token-color-vault-secrets-gradient-faint-stop: #fff9cf;
147156
--token-color-vault-brand: #ffd814;
148157
--token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */
149158
--token-color-vault-foreground: #9a6f00;

‎packages/tokens/dist/docs/products/tokens.json‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3023,6 +3023,215 @@
30233023
"stop"
30243024
]
30253025
},
3026+
{
3027+
"value": "#ffd814",
3028+
"type": "color",
3029+
"group": "branding",
3030+
"original": {
3031+
"value": "{color.palette.vault-secrets-brand.value}",
3032+
"type": "color",
3033+
"group": "branding"
3034+
},
3035+
"name": "token-color-vault-secrets-brand",
3036+
"attributes": {
3037+
"category": "color",
3038+
"type": "vault-secrets",
3039+
"item": "brand"
3040+
},
3041+
"path": [
3042+
"color",
3043+
"vault-secrets",
3044+
"brand"
3045+
]
3046+
},
3047+
{
3048+
"value": "#000000",
3049+
"type": "color",
3050+
"group": "branding",
3051+
"comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work",
3052+
"original": {
3053+
"value": "#000",
3054+
"type": "color",
3055+
"group": "branding",
3056+
"comment": "this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work"
3057+
},
3058+
"name": "token-color-vault-secrets-brand-alt",
3059+
"attributes": {
3060+
"category": "color",
3061+
"type": "vault-secrets",
3062+
"item": "brand-alt"
3063+
},
3064+
"path": [
3065+
"color",
3066+
"vault-secrets",
3067+
"brand-alt"
3068+
]
3069+
},
3070+
{
3071+
"value": "#9a6f00",
3072+
"type": "color",
3073+
"group": "branding",
3074+
"original": {
3075+
"value": "{color.palette.vault-secrets-500.value}",
3076+
"type": "color",
3077+
"group": "branding"
3078+
},
3079+
"name": "token-color-vault-secrets-foreground",
3080+
"attributes": {
3081+
"category": "color",
3082+
"type": "vault-secrets",
3083+
"item": "foreground"
3084+
},
3085+
"path": [
3086+
"color",
3087+
"vault-secrets",
3088+
"foreground"
3089+
]
3090+
},
3091+
{
3092+
"value": "#fff9cf",
3093+
"type": "color",
3094+
"group": "branding",
3095+
"original": {
3096+
"value": "{color.palette.vault-secrets-50.value}",
3097+
"type": "color",
3098+
"group": "branding"
3099+
},
3100+
"name": "token-color-vault-secrets-surface",
3101+
"attributes": {
3102+
"category": "color",
3103+
"type": "vault-secrets",
3104+
"item": "surface"
3105+
},
3106+
"path": [
3107+
"color",
3108+
"vault-secrets",
3109+
"surface"
3110+
]
3111+
},
3112+
{
3113+
"value": "#feec7b",
3114+
"type": "color",
3115+
"group": "branding",
3116+
"original": {
3117+
"value": "{color.palette.vault-secrets-100.value}",
3118+
"type": "color",
3119+
"group": "branding"
3120+
},
3121+
"name": "token-color-vault-secrets-border",
3122+
"attributes": {
3123+
"category": "color",
3124+
"type": "vault-secrets",
3125+
"item": "border"
3126+
},
3127+
"path": [
3128+
"color",
3129+
"vault-secrets",
3130+
"border"
3131+
]
3132+
},
3133+
{
3134+
"value": "#feec7b",
3135+
"type": "color",
3136+
"group": "branding",
3137+
"original": {
3138+
"value": "{color.palette.vault-secrets-100.value}",
3139+
"type": "color",
3140+
"group": "branding"
3141+
},
3142+
"name": "token-color-vault-secrets-gradient-primary-start",
3143+
"attributes": {
3144+
"category": "color",
3145+
"type": "vault-secrets",
3146+
"item": "gradient",
3147+
"subitem": "primary",
3148+
"state": "start"
3149+
},
3150+
"path": [
3151+
"color",
3152+
"vault-secrets",
3153+
"gradient",
3154+
"primary",
3155+
"start"
3156+
]
3157+
},
3158+
{
3159+
"value": "#ffe543",
3160+
"type": "color",
3161+
"group": "branding",
3162+
"original": {
3163+
"value": "{color.palette.vault-secrets-200.value}",
3164+
"type": "color",
3165+
"group": "branding"
3166+
},
3167+
"name": "token-color-vault-secrets-gradient-primary-stop",
3168+
"attributes": {
3169+
"category": "color",
3170+
"type": "vault-secrets",
3171+
"item": "gradient",
3172+
"subitem": "primary",
3173+
"state": "stop"
3174+
},
3175+
"path": [
3176+
"color",
3177+
"vault-secrets",
3178+
"gradient",
3179+
"primary",
3180+
"stop"
3181+
]
3182+
},
3183+
{
3184+
"value": "#fffdf2",
3185+
"type": "color",
3186+
"group": "branding",
3187+
"comment": "this is the 'vault-secrets-50' value at 25% opacity on white",
3188+
"original": {
3189+
"value": "#fffdf2",
3190+
"type": "color",
3191+
"group": "branding",
3192+
"comment": "this is the 'vault-secrets-50' value at 25% opacity on white"
3193+
},
3194+
"name": "token-color-vault-secrets-gradient-faint-start",
3195+
"attributes": {
3196+
"category": "color",
3197+
"type": "vault-secrets",
3198+
"item": "gradient",
3199+
"subitem": "faint",
3200+
"state": "start"
3201+
},
3202+
"path": [
3203+
"color",
3204+
"vault-secrets",
3205+
"gradient",
3206+
"faint",
3207+
"start"
3208+
]
3209+
},
3210+
{
3211+
"value": "#fff9cf",
3212+
"type": "color",
3213+
"group": "branding",
3214+
"original": {
3215+
"value": "{color.palette.vault-secrets-50.value}",
3216+
"type": "color",
3217+
"group": "branding"
3218+
},
3219+
"name": "token-color-vault-secrets-gradient-faint-stop",
3220+
"attributes": {
3221+
"category": "color",
3222+
"type": "vault-secrets",
3223+
"item": "gradient",
3224+
"subitem": "faint",
3225+
"state": "stop"
3226+
},
3227+
"path": [
3228+
"color",
3229+
"vault-secrets",
3230+
"gradient",
3231+
"faint",
3232+
"stop"
3233+
]
3234+
},
30263235
{
30273236
"value": "#ffd814",
30283237
"type": "color",

‎packages/tokens/dist/marketing/css/tokens.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* Do not edit directly
3-
* Generated on Fri, 21 Jul 2023 16:17:00 GMT
3+
* Generated on Fri, 15 Sep 2023 06:10:51 GMT
44
*/
55

66
:root {
@@ -142,6 +142,15 @@
142142
--token-color-vagrant-gradient-primary-stop: #7dadff;
143143
--token-color-vagrant-gradient-faint-start: #f4faff; /* this is the 'vagrant-50' value at 25% opacity on white */
144144
--token-color-vagrant-gradient-faint-stop: #d6ebff;
145+
--token-color-vault-secrets-brand: #ffd814;
146+
--token-color-vault-secrets-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault Secrets would not work */
147+
--token-color-vault-secrets-foreground: #9a6f00;
148+
--token-color-vault-secrets-surface: #fff9cf;
149+
--token-color-vault-secrets-border: #feec7b;
150+
--token-color-vault-secrets-gradient-primary-start: #feec7b;
151+
--token-color-vault-secrets-gradient-primary-stop: #ffe543;
152+
--token-color-vault-secrets-gradient-faint-start: #fffdf2; /* this is the 'vault-secrets-50' value at 25% opacity on white */
153+
--token-color-vault-secrets-gradient-faint-stop: #fff9cf;
145154
--token-color-vault-brand: #ffd814;
146155
--token-color-vault-brand-alt: #000000; /* this is a special “alternative” color, used as an exception in some contexts where the normal “brand” color for Vault would not work */
147156
--token-color-vault-foreground: #9a6f00;

0 commit comments

Comments
 (0)