feat(icons) added play, pause, reboot and stop icons

canonical · Mar 24, 2023 · d5a8e0e · d5a8e0e
1 parent 3c3fe47
commit d5a8e0e
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vanilla-framework",
-  "version": "3.12.2",
+  "version": "3.13.0",
   "author": {
     "email": "webteam@canonical.com",
     "name": "Canonical Webteam"

diff --git a/releases.yml b/releases.yml
@@ -1,3 +1,9 @@
+- version: 3.13.0
+  features:
+    - component: Icons
+      url: /docs/patterns/icons
+      status: New
+      notes: "We've added three new icons related to instance management: <code>.p-icon--play</code>, <code>.p-icon--pause</code> and <code>.p-icon--stop</code>."
 - version: 3.12.1
   features:
     - component: Text with icon utility class

diff --git a/scss/_base_icon-definitions.scss b/scss/_base_icon-definitions.scss
@@ -485,3 +485,15 @@
 @mixin vf-icon-desktop($color) {
   background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='desktop-2'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M2.5 3.5H13.5V10.5H2.5L2.5 3.5ZM1 3.5C1 2.67157 1.67157 2 2.5 2H13.5C14.3284 2 15 2.67157 15 3.5V10.5C15 11.3284 14.3284 12 13.5 12H8.75V13.25H11V14.75H5V13.25H7.25V12H2.5C1.67157 12 1 11.3284 1 10.5V3.5Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
 }
+
+@mixin vf-icon-play($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='play'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Triangle (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M11.3844 7.98987L5.50005 3.87809L5.50005 12.1161L11.3844 7.98987ZM12.538 9.01296C13.2485 8.51475 13.2476 7.46192 12.5363 6.96488L5.96604 2.37377C5.13747 1.7948 4.00005 2.3876 4.00005 3.3984L4.00005 12.5968C4.00005 13.6085 5.13935 14.2011 5.96773 13.6202L12.538 9.01296Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+@mixin vf-icon-pause($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='pause'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Union' fill-rule='evenodd' clip-rule='evenodd' d='M5.5 3.02393H4V12.9917H5.5V3.02393ZM11.5 3.02393H10V12.9917H11.5V3.02393Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+@mixin vf-icon-stop($color) {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='stop'%3E%3Crect width='16' height='16' /%3E%3Cpath id='Rectangle 13 (Stroke)' fill-rule='evenodd' clip-rule='evenodd' d='M12 3.5H4C3.72386 3.5 3.5 3.72386 3.5 4V12C3.5 12.2761 3.72386 12.5 4 12.5H12C12.2761 12.5 12.5 12.2761 12.5 12V4C12.5 3.72386 12.2761 3.5 12 3.5ZM4 2C2.89543 2 2 2.89543 2 4V12C2 13.1046 2.89543 14 4 14H12C13.1046 14 14 13.1046 14 12V4C14 2.89543 13.1046 2 12 2H4Z' fill='#{vf-url-friendly-color($color)}'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
diff --git a/scss/_patterns_icons.scss b/scss/_patterns_icons.scss
@@ -1550,3 +1550,39 @@
     }
   }
 }
+
+@mixin vf-p-icon-play {
+  .p-icon--play {
+    @extend %icon;
+    @include vf-icon-play($color-mid-dark);
+
+    [class*='--dark'] &,
+    &.is-light {
+      @include vf-icon-play($color-mid-x-light);
+    }
+  }
+}
+
+@mixin vf-p-icon-pause {
+  .p-icon--pause {
+    @extend %icon;
+    @include vf-icon-pause($color-mid-dark);
+
+    [class*='--dark'] &,
+    &.is-light {
+      @include vf-icon-pause($color-mid-x-light);
+    }
+  }
+}
+
+@mixin vf-p-icon-stop {
+  .p-icon--stop {
+    @extend %icon;
+    @include vf-icon-stop($color-mid-dark);
+
+    [class*='--dark'] &,
+    &.is-light {
+      @include vf-icon-stop($color-mid-x-light);
+    }
+  }
+}
diff --git a/scss/standalone/patterns_icons-additional.scss b/scss/standalone/patterns_icons-additional.scss
@@ -62,7 +62,9 @@
 @include vf-p-icon-mount-2;
 @include vf-p-icon-mount;
 @include vf-p-icon-open-terminal;
+@include vf-p-icon-pause;
 @include vf-p-icon-plans;
+@include vf-p-icon-play;
 @include vf-p-icon-pods;
 @include vf-p-icon-power-error;
 @include vf-p-icon-power-off;
@@ -86,6 +88,7 @@
 @include vf-p-icon-status-waiting-small;
 @include vf-p-icon-status-waiting;
 @include vf-p-icon-status;
+@include vf-p-icon-stop;
 @include vf-p-icon-submit-bug;
 @include vf-p-icon-success-grey;
 @include vf-p-icon-switcher-dashboard;

diff --git a/templates/docs/examples/patterns/icons/icons-additional.html b/templates/docs/examples/patterns/icons/icons-additional.html
@@ -61,7 +61,9 @@
   <i class="p-icon--mount is-light"></i>
   <i class="p-icon--unmount is-light"></i>
   <i class="p-icon--open-terminal is-light"></i>
+  <i class="p-icon--pause is-light"></i>
   <i class="p-icon--plans is-light"></i>
+  <i class="p-icon--play is-light"></i>
   <i class="p-icon--pods is-light"></i>
   <i class="p-icon--power-error is-light"></i>
   <i class="p-icon--power-off is-light"></i>
@@ -84,6 +86,7 @@
   <i class="p-icon--status-queued is-light"></i>
   <i class="p-icon--status-waiting is-light"></i>
   <i class="p-icon--status is-light"></i>
+  <i class="p-icon--stop is-light"></i>
   <i class="p-icon--submit-bug is-light"></i>
   <i class="p-icon--success-grey is-light"></i>
   <i class="p-icon--switcher-dashboard is-light"></i>
@@ -157,7 +160,9 @@
   <i class="p-icon--mount"></i>
   <i class="p-icon--unmount"></i>
   <i class="p-icon--open-terminal"></i>
+  <i class="p-icon--pause"></i>
   <i class="p-icon--plans"></i>
+  <i class="p-icon--play"></i>
   <i class="p-icon--pods"></i>
   <i class="p-icon--power-error"></i>
   <i class="p-icon--power-off"></i>
@@ -180,6 +185,7 @@
   <i class="p-icon--status-queued"></i>
   <i class="p-icon--status-waiting"></i>
   <i class="p-icon--status"></i>
+  <i class="p-icon--stop"></i>
   <i class="p-icon--submit-bug"></i>
   <i class="p-icon--success-grey"></i>
   <i class="p-icon--switcher-dashboard"></i>

diff --git a/templates/docs/patterns/icons/index.md b/templates/docs/patterns/icons/index.md
@@ -22,7 +22,7 @@ context:
 
 {% set status_icons = ['error', 'warning', 'success'] %}
 
-{% set additional_icons = ['applications', 'controllers', 'fullscreen', 'models', 'machines', 'pin', 'units', 'priority-critical', 'priority-high', 'priority-low', 'priority-medium', 'priority-negligible', 'priority-unknown', 'add-canvas', 'add-logical-volume', 'add-partition', 'back-to-top', 'begin-downloading', 'bundle', 'canvas', 'change-version', 'comments', 'conflict-grey', 'conflict-resolution-grey', 'conflict-resolution', 'conflict', 'connected', 'containers', 'copy-to-clipboard', 'desktop', 'disconnect', 'edit', 'export', 'exposed', 'filter', 'fork', 'get-link', 'halfscreen-bar', 'hide', 'highlight-off', 'highlight-on', 'home', 'import', 'in-progress', 'inspector-debug', 'loading-steps', 'lock-locked-active', 'lock-locked', 'lock-unlock', 'maximise-bar', 'minimise-bar', 'mount-2', 'mount', 'open-terminal', 'plans', 'pods', 'power-error', 'power-off', 'power-on', 'profile', 'restart', 'revisions', 'security', 'settings', 'show', 'sort-both', 'sort-down', 'sort-up', 'starred', 'status-failed-small', 'status-in-progress-small', 'status-in-progress', 'status-queued-small', 'status-queued', 'status-succeeded-small', 'status-waiting-small', 'status-waiting', 'status', 'submit-bug', 'success-grey', 'switcher-dashboard', 'switcher-environments', 'switcher', 'tag', 'task-outstanding', 'timed-out-grey', 'timed-out', 'topic', 'unit-pending', 'unit-running', 'unmount', 'unstarred', 'user-group', 'video-play', 'warning-grey'] %}
+{% set additional_icons = ['applications', 'controllers', 'fullscreen', 'models', 'machines', 'pin', 'units', 'priority-critical', 'priority-high', 'priority-low', 'priority-medium', 'priority-negligible', 'priority-unknown', 'add-canvas', 'add-logical-volume', 'add-partition', 'back-to-top', 'begin-downloading', 'bundle', 'canvas', 'change-version', 'comments', 'conflict-grey', 'conflict-resolution-grey', 'conflict-resolution', 'conflict', 'connected', 'containers', 'copy-to-clipboard', 'desktop', 'disconnect', 'edit', 'export', 'exposed', 'filter', 'fork', 'get-link', 'halfscreen-bar', 'hide', 'highlight-off', 'highlight-on', 'home', 'import', 'in-progress', 'inspector-debug', 'loading-steps', 'lock-locked-active', 'lock-locked', 'lock-unlock', 'maximise-bar', 'minimise-bar', 'mount-2', 'mount', 'open-terminal', 'pause', 'plans', 'play', 'pods', 'power-error', 'power-off', 'power-on', 'profile', 'restart', 'revisions', 'security', 'settings', 'show', 'sort-both', 'sort-down', 'sort-up', 'starred', 'status-failed-small', 'status-in-progress-small', 'status-in-progress', 'status-queued-small', 'status-queued', 'status-succeeded-small', 'status-waiting-small', 'status-waiting', 'status', 'stop', 'submit-bug', 'success-grey', 'switcher-dashboard', 'switcher-environments', 'switcher', 'tag', 'task-outstanding', 'timed-out-grey', 'timed-out', 'topic', 'unit-pending', 'unit-running', 'unmount', 'unstarred', 'user-group', 'video-play', 'warning-grey'] %}
 
 {% set social_icons = ['facebook', 'instagram', 'twitter', 'linkedin', 'youtube', 'github', 'rss', 'email'] %}